<div class="max-w-3xl px-6 pb-24 mx-auto space-y-12">
    <div class="w-full mx-auto space-y-4 text-center">
        <%= link "← All posts", class: " p-1 text-sm md:p-2 md:text-base max-w-min rounded-lg hover:bg-slate-200", to: Routes.blog_path(@conn, :index)%>
        <p class="text-xs font-semibold tracking-wider uppercase"><%= @article.category %></p>
        <h1 class="text-4xl font-bold leading-tight md:text-5xl"><%= @article.title %></h1>
        <p class="text-sm">by <span itemprop="name"><%= @article.author.name %></span> on <time datetime={@article.published}><%= @article.published |> Calendar.strftime("%b %d, %Y") %></time></p>
    </div>
    <div class="blog-article pb-24 prose prose-lg prose-indigo text-gray-500 max-w-none border-b border-grey-lighter">
        <%= raw @article.html %>
    </div>
</div>

<div class="relative px-6 pb-24 bg-gray-50">
    <div class="absolute inset-0">
        <div class="h-1/3 bg-white sm:h-2/3"></div>
    </div>
    <div class="relative mx-auto max-w-7xl">
        <div class="text-center">
            <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Other blog posts</h2>
            <p class="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4">
                You might be interested in these other articles
            </p>
        </div>
        <div class="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
            <%= for article <- @related do %>
                <%= render "_post_card.html", conn: @conn, article: article %>
            <% end %>
        </div>
    </div>
</div>

<div class="relative max-w-3xl mt-6 px-6 pb-24 mx-auto space-y-12">
    <%= render "_blog_footer.html" %>
</div>
